<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-title" content="足彩"/>
    <title></title>
    <!--font-awsome-css-->
    <link rel="stylesheet" href="../public/styles/font-awesome.min.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../public/styles/bootstrap.min.css">
    <!-- swiper -->
    <link rel="stylesheet" href="../public/styles/swiper.min.css"/>
    <!--custom css-->
    <link rel="stylesheet" href="../public/styles/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../public/styles/index.css" />
    <link rel="stylesheet" href="../public/styles/common.css">


</head>
<body>
    <div class="masthead pdng-stn1">
        <!-- 左侧抽屉开始 -->
        <div id="menu" class="panel" role="navigation">
            <button type="button" class="close nav-close">×</button>
            <div class="wrap-content">
                <div class="profile-menu">
                    <ul class="menu-ul">
                        <li><a href="index.html">HOME <i class="fa fa-chevron-right"></i></a></li>
                        <li><a href="allGame.html">ALL GAMES <i class="fa fa-chevron-right"></i></a></li>
                        <li><a href="http://news.futurefun.net">NEWS <i class="fa fa-chevron-right"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 内容开始 -->
        <div class="phone-box wrap push">
            <div id="home" class="menu-notify" style="position: fixed;top: 0;width: 100%;height: 48px">
                <div class="profile-left">
                    <a href="#menu" class="menu-link"><i class="fa fa-reorder"></i></a>
                </div>
                <div class="Profile-mid logo">
                    <h1><span class="link coun-title"></span></h1>
                </div>
                <div class="clearfix"></div>
            </div>
            <!-- recommend -->
            <div class="recommend" id="res-eventList" style="margin-top: 48px"></div>
            <script type="text/template" charset="utf-8" id="tpl-eventList">
                <ul class="country-list">
                    {{? it.length}}
                        {{~ it :value:index}}
                        <li><a href="country.html?competitionId={{= value.competitionId}}&competitionNamEn={{= value.competitionNameEn}}">{{= value.competitionNameEn}}<i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
                        {{~}}
                    {{??}}
                        <div class="no-order">
                            <img src="../public/images/no-data.png">
                            <p>No Data</p>
                        </div>
                    {{?}}
                </ul>
            </script>

        </div>
    </div>


    <script type="text/javascript" src="../public/scripts/vendor/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/jquery.cookie.js"></script>
    <script type="text/javascript" src="../public/scripts/vendor/doT.min.js"></script>
    <script type="text/javascript" src="../public/scripts/common.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.menu-link').sidebar();

            var countryId = $.getQueryString('country_id');

            $.ajax({
                type: 'get',
                url: apiDomain + '/country/competitionList?' + new Date().getTime(),
                dataType: "json",
                cache: false,
                data: {countryId: countryId},
                success: function (data) {
                    console.log(data);
                    if (data.code == "0") {
                        //渲染模版
                        var tpl = doT.template($("#tpl-eventList").html());
                        $("#res-eventList").html(tpl(data.results));

                        $('.coun-title').html($.getQueryString('country_name').substr(0,30));
                    } else {
                        //简单提示框
                        $.blt(data.msg);
                    }
                }
            })

        })
    </script>
</body>
</html>